<script setup lang="ts">
import FinanciaMom from '@/components/Echart/Table/FinanciaMom.vue'
import { storeToRefs } from 'pinia'
import { reactive, watch, computed } from 'vue'
import { useFinanceStore } from '@/stores/module/finance'
const financeStore = useFinanceStore() // 创建store实例
const { getProfitQoq }: any = storeToRefs(financeStore)
const barValues = getProfitQoq.value?.info[0]?.bar?.value
const subTitles = getProfitQoq.value?.sub_titles
const lineValues = getProfitQoq.value?.info[0]?.line?.value

const options = reactive(
  subTitles?.map((title, index) => ({
    id: index.toString(),
    name: subTitles,
    valueDifference: barValues[index],
    YoYIncrease: lineValues[index],
  }))
)
</script>
<template>
 
    <card-box  >
      <template v-slot:title v-if="getProfitQoq.title">
        <h1>{{ getProfitQoq.titleM }}</h1>
      </template>
      <FinanciaMom :chart-data="options" v-if="getProfitQoq.info.length" />
      <div v-else class="default-img">
        <p>{{ $t('bi_common_nodata') }}</p>
      </div>
    </card-box>
 
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
</style>
